<template>
  <view class="fix-bottom-btn">
    <slot></slot>
  </view>
</template>
<script>
export default {
  name: 'FixedBottomButton',
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
.fix-bottom-btn {
  position: fixed;
  height: calc(88rpx + 40rpx + constant(safe-area-inset-bottom));
  height: calc(88rpx + 40rpx + env(safe-area-inset-bottom));
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e8e8e8;
  background: white;
  padding: 20rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  box-sizing: border-box;
  width: 100%;
  z-index: 999;
}
@supports not (constant(safe-area-inset-bottom)) {
  .fix-bottom-btn {
    padding-bottom: 68rpx;
    height: auto;
  }
}
</style>
